<template>
	<m-layout class="detalis" gap="0" :title="item.title">
		<m-block gap="20">
			<view class="title">
				{{item.title}}
			</view>
			<view class="times flex" v-if="item.typeid == 25">
				<view class="times-1 flex">
					来源：同在优选
				</view>
				<view class="times-2">
					{{item.ctime | getDateDiff}}
				</view>
			</view>
			<view class="content" v-html="item.content">

			</view>
		</m-block>
	</m-layout>
</template>

<script>
	import { GetNewsInfo } from '@/api/News.js'
	export default {
		data() {
			return {
				item: {},
				code: '',
			};

		},
		onLoad({ id, code }) {
			this.id = id;
			this.code = code || '';
			this.GetNewsInfo()
		},
		methods: {
			async GetNewsInfo() {
				const { data } = await GetNewsInfo({
					id: this.id,
					code: this.code,
				})
				this.item = data;
				this.item.content = this.item.content.toString().replace(/\<img/gi,
					"<img style='width:100%;padding: 0;display: block;margin: 0;'");
			},
		},

	}
</script>

<style lang="scss">
	.detalis {
		/deep/ .layout-content {
			padding-bottom: 20rpx;
		}
	}

	.title {
		text-align: center;
		color: #111;
		font-size: 36rpx;
		margin-bottom: 20rpx;
	}

	.times {
		margin-top: 20rpx;
		padding-bottom: 30rpx;
		font-size: 24rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;

		.times-2 {
			padding-left: 15rpx;
		}
	}

	.content {
		min-height: 76vh;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #111;
		width: 100%;
		overflow-x: hidden;

		/deep/ rich-text {
			img {
				max-width: 100%;
			}
		}

		p {
			img {
				width: 100%;
			}
		}

		/deep/ image {
			width: 100% !important;
		}

		/deep/ img {
			width: 100% !important;
		}
	}
</style>